<template>
  <div class="backlog-list">
    <div class="title">
      <p><span>|</span>待办待阅</p>
      <a href="#">更多</a>
    </div>
    <div class="backlog-section">
      <div class="tabs">
        <div class="tab active">项目待办</div>
        <div class="tab" style="color:#1A70AD;font-size: 18px;">|</div>
        <div class="tab">会议待办</div>
      </div>
      <div class="task-list">
        <div class="head">
          <span>标题</span>
          <span>申请人</span>
          <span>发布时间</span>
          <span>操作</span>
        </div>
        <div class="task-item" v-for="(task, index) in tasks" :key="index">
          <div class="task-checkbox">
            <input type="checkbox" :id="'task-' + ((currentPage - 1) * pageSize + index)">
            <label :for="'task-' + ((currentPage - 1) * pageSize + index)" class="checkbox-label"></label>
            <span class="priority-dot" v-if="!task.read"></span>
            <span class="priority-dot-placeholder" v-if="task.read"></span>
          </div>
          <div class="task-content">
            <div class="task-title">{{ task.projectName }}</div>
            <div class="task-time">{{ task.applicantName }}</div>
            <div class="task-time">{{ task.createTime }}</div>
            <div class="task-action">
              <!-- <a href="#" class="detail-link" @click.prevent="showDetail(task)">详情</a> -->
              <el-button type="text" @click="yes(task.id, index)">同意</el-button>
              <el-button type="text" style="color:red" @click="no(task.id, index)">拒绝</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination">
      <div class="pagination-left">
        <select class="page-size" v-model.number="pageSize" @change="currentPage = 1">
          <option value="10">10</option>
          <option value="20">20</option>
          <option value="50">50</option>
        </select>
        <span class="total-count">Total {{ tasks.length }}</span>
      </div>
      <div class="pagination-right">
        <a href="#" class="page-link" :class="{ disabled: currentPage === 1 }" @click.prevent="prevPage">&lt;</a>
        <a v-for="page in totalPages" :key="page" href="#" class="page-link" :class="{ active: currentPage === page }"
          @click.prevent="goToPage(page)">{{ page }}</a>
        <a href="#" class="page-link" :class="{ disabled: currentPage === totalPages }"
          @click.prevent="nextPage">&gt;</a>
      </div>
    </div>
    <dialog ref="detailDialog" class="detail-dialog">
      <div v-if="currentTask">
        <h3>任务详情</h3>
        <p><strong>标题：</strong>{{ currentTask.title }}</p>
        <p><strong>时间：</strong>{{ currentTask.time }}</p>
        <el-button type="primary" plain @click="closeDetail">关闭</el-button>
      </div>
    </dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, nextTick, onMounted } from 'vue'
import request from '@/utils/http'
import { log } from 'echarts/types/src/util/log.js'


const id = ref(0)
const tasks = ref<any[]>([])
const getBacklogList = async () => {
  try {
    const res = await request({
      url: '/request/modifyRequest',
    })
    console.log(res)
    tasks.value = res.data.list
  } catch (error) {
    // console.error('获取数据失败:', error)
  }
}
onMounted(() => getBacklogList())


const detailDialog = ref<HTMLDialogElement | null>(null)
const currentTask = ref<{ title: string; time: string; read: boolean } | null>(null)

const pageSize = ref(10)
const currentPage = ref(1)
const totalPages = computed(() => Math.ceil(tasks.value.length / pageSize.value))

const pagedTasks = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return tasks.value.slice(start, start + pageSize.value)
})

function prevPage() {
  if (currentPage.value > 1) currentPage.value--
}
function nextPage() {
  if (currentPage.value < totalPages.value) currentPage.value++
}
function goToPage(page: number) {
  if (page >= 1 && page <= totalPages.value) currentPage.value = page
}
function showDetail(task: { title: string; time: string; read: boolean }) {
  currentTask.value = task
  task.read = true
  nextTick(() => {
    detailDialog.value?.showModal()
  })
}
function closeDetail() {
  detailDialog.value?.close()
  currentTask.value = null
}



async function yes(taskId: number, index: number) {
  try {

    console.log(taskId, index);

    const res = await request.put(`/request/modifyRequest/${taskId}`, {
      projectId: tasks.value[index].projectId,
      projectName: tasks.value[index].projectName,
      applicantId: tasks.value[index].applicantId,
      applicantName: tasks.value[index].applicantName,
      approverId: tasks.value[index].approverId,
      approverName: tasks.value[index].approverName,
      requestStatus: 1
    })
    console.log('同意', `任务索引: ${index}`)
    console.log(res)

    tasks.value[index].requestStatus = 1
  } catch (error) {
    console.error('获取数据失败:', error)
    console.log(error)
  }
}

async function no(taskId: number, index: number) {
  try {
    const res = await request.delete(`/request/modifyRequest/${taskId}`)
    console.log('拒绝', `任务索引: ${index}`)
    console.log(res)
  } catch (error) {
    console.error('操作失败:', error)
    console.log(error)
  }
}

</script>

<style scoped>
.backlog-list {
  width: 790px;
  height: 702px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 15px;
  flex-shrink: 0;

  a {
    font-size: 12px;
    color: #1A70AD;
    text-decoration: none;
    margin-right: 15px;
  }

  span {
    font-size: 18px;
    color: #1A70AD;
    font-weight: bold;
  }
}

.head {
  background-color: #F6F8FC;
  font-size: 12px;
  width: 740px;
  height: 25px;
  flex-shrink: 0;

  span {
    width: 100%;
    line-height: 25px;
  }
}

.head>:first-child {
  margin-left: 40px;
}

.head>:nth-child(2) {
  margin-left: 485px;
}

.head>:last-child {
  margin-left: 78px;
}

.backlog-section {
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
  margin-left: 15px;
  flex-shrink: 0;
}

.tab {
  padding: 12px 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: #333;
}

.tab.active {
  color: #1A70AD;
  border-bottom-color: #1A70AD;
}

.detail-dialog {
  width: 450px;
  height: 200px;
  border: rgba(0, 0, 0, 0);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  p {
    font-size: 15px;
  }

  h3 {
    font-size: 25px;
  }
}

.task-list {
  font-size: 12px;
  align-items: center;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.task-item {
  width: 100%;
  display: flex;
  padding: 18px 0;
  margin-right: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.task-checkbox {
  display: flex;
  align-items: center;
  margin-left: 50px;
}

.task-checkbox input[type="checkbox"] {
  display: none;
}

.checkbox-label {
  width: 16px;
  height: 16px;
  border: 2px solid #ddd;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.task-checkbox input[type="checkbox"]:checked+.checkbox-label {
  background: #1A70AD;
  border-color: #1A70AD;
}

.task-checkbox input[type="checkbox"]:checked+.checkbox-label::after {
  content: '✓';
  position: absolute;
  top: -2px;
  left: 2px;
  color: white;
  font-size: 12px;
}

.priority-dot {
  width: 6px;
  height: 6px;
  background: #EC808D;
  border-radius: 50%;
  margin-left: 8px;
}

.priority-dot-placeholder {
  width: 6px;
  height: 6px;
  margin-left: 8px;
}

.task-content {
  display: flex;
  height: 100%;
}

.task-title {
  flex: 1;
  font-size: 12px;
  color: #797979;
  line-height: 1.5;
}

.task-time {
  font-size: 13px;
  color: #797979;
  margin-left: 200px;
  margin-right: 50px;
}

.task-action {
  width: 80px;
}

.detail-link {
  color: #1A70AD;
  text-decoration: none;
  font-size: 12px;
}

.pagination {
  display: flex;
  width: 790px;
  justify-content: flex-end;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid #eee;
  flex-shrink: 0;
}

.pagination-left {
  margin: 0 auto;
  width: 100%;
  gap: 8px
}

.page-size {
  border: 1px solid #333;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
}

.total-count {
  font-size: 12px;
  color: #797979
}

.pagination-right {
  display: flex;
  margin-left: auto;
  gap: 8px;
}

.page-link {
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  font-size: 12px;
}

.page-link.active {
  background: #1A70AD;
  color: white;
  border-color: #1A70AD;
}

.page-link:hover {
  border-color: #1A70AD;
  color: #1A70AD;
}
</style>
